<!-- 维修项目统计分析 -->
<template>
	<a-card class="container">
		<template #title> 维修项目报修量统计 </template>
		<template #extra>
			<a-button type="primary" class="mybtn" :icon="h(SearchOutlined)" @click="initData">查询</a-button>
			<a-button class="mybtn" :icon="h(RedoOutlined)" @click="restPage">重置</a-button>
		</template>
		<a-form class="search-form" v-model="searchForm">
			<a-form-item label="维修时间： " name="time">
				<a-radio-group @change="initData" :size="size" v-model:value="timeType" button-style="solid">
					<a-radio-button value="a">全部</a-radio-button>
					<a-radio-button value="b">近一年</a-radio-button>
					<a-radio-button value="c">近一月</a-radio-button>
					<a-radio-button value="d">近一周</a-radio-button>
					<a-radio-button value="e">昨日</a-radio-button>
					<a-radio-button value="f">今日</a-radio-button>
					<a-radio-button value="z">自定义日期</a-radio-button>
				</a-radio-group>
				<a-range-picker v-if="timeType == 'z'" format="YYYY-MM-DD" @change="onTimePickChange" style="margin-left: 8px" :size="size" />
			</a-form-item>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="报修区域： ">
						<a-select
							@change="initData"
							placeholder="请选择报修区域"
							v-model:value="searchForm.tj_qy"
							:field-names="{ label: 'name', value: 'id' }"
							allowClear
							:options="qys"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="承修单位： ">
						<a-select
							@change="initData"
							placeholder="请选择承修单位"
							v-model:value="searchForm.rep_u_id"
							:field-names="{ label: 'name', value: 'id' }"
							allowClear
							:options="dws"
						></a-select>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<a-collapse v-model:activeKey="activeKey">
			<a-collapse-panel key="1" header="统计图表">
				<CxdwBxlEchart :xdata="xData" :ydata="yData" title="维修项目统计分析" />
			</a-collapse-panel>
			<a-collapse-panel key="2" header="统计表格">
				<a-table
					:dataSource="dataSource"
					:columns="columns"
					:pagination="false"
					:size="size"
					bordered
					:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'total'">
							<a-button v-if="record.total > 0" type="link" @click="toBillSearch('', record.rep_i_id)">{{ record.total }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'dsh'">
							<a-button v-if="record.dsh > 0" type="link" @click="toBillSearch('待审核', record.rep_i_id)">{{ record.dsh }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'dsl'">
							<a-button v-if="record.dsl > 0" type="link" @click="toBillSearch('待受理', record.rep_i_id)">{{ record.dsl }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'dwg'">
							<a-button v-if="record.dwg > 0" type="link" @click="toBillSearch('待完工', record.rep_i_id)">{{ record.dwg }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'ywg'">
							<a-button v-if="record.ywg > 0" type="link" @click="toBillSearch('已完工', record.rep_i_id)">{{ record.ywg }}</a-button>
							<span v-else></span>
						</template>
						<template v-else-if="column.dataIndex === 'sc'">
							<a-button v-if="record.sc > 0" type="link" @click="toBillSearch('删除驳回', record.rep_i_id)">{{ record.sc }}</a-button>
							<span v-else></span>
						</template>
					</template>
				</a-table>
			</a-collapse-panel>
		</a-collapse>
	</a-card>
</template>
<script setup>
	import { onMounted, ref, reactive, h, toRefs } from 'vue';
	import { SearchOutlined, RedoOutlined, DownloadOutlined } from '@ant-design/icons-vue';
	import CxdwBxlEchart from '../components/onebar-echart.vue';
	import { RepairApi } from '@/api/repair-api';
	import tool from '@/utils/tool';
	import { useRouter } from 'vue-router';
	const router = useRouter();

	const size = ref('small');
	const activeKey = ref(['1', '2']);
	const timeType = ref('a');
	const qys = ref([]);
	const dws = ref([]);
	let selectDay = [];
	const xData = ref([]);
	const yData = ref([]);
	const dataSource = ref([]); //列表数据
	// 查询表单数据
	let searchForm = reactive({
		tj_qy: '',
		rep_u_id: '',
	});
	onMounted(() => {
		initParam();
		initData();
	});

	const initParam = async function () {
		tool.showLoading();
		const pageParam = await RepairApi.getPageRef();
		tool.hideLoading();
		qys.value = pageParam.查询条件中区域字典;
	};
	const restPage = function () {
		searchForm = Object.assign(searchForm, {
			tj_qy: '',
			rep_u_id: '',
		});
		timeType.value = 'a';
		initData();
	};
	// ----------------------查询表单部分内容---------------------
	const onTimePickChange = (value, dateString) => {
		selectDay = dateString;
	};

	// ----------------------列表相关部分---------------------
	const initData = async function () {
		if(timeType.value=='z' && selectDay.length==0){
			tool.warning("请输入自定义日期！");
			return;
		}
		let time = [];
		if (timeType.value != 'z') {
			time = tool.getTimeArray(timeType.value);
		} else {
			time = selectDay;
		}
		tool.showLoading();
		const data = await RepairApi.getBxWxxm({
			tj_time_start: time[0],
			tj_time_end: time[1],
			...searchForm,
		});
		dws.value = data.repair_unit;
		tool.hideLoading();

		let items = []; //按项目汇总
		data.datas.forEach((ele) => {
			//计算每个部门的总量
			let isHave = false;
			for (let i = 0; i < items.length; i++) {
				if (items[i].rep_i_id == ele.rep_i_id) {
					items[i].total += ele.size_;
					isHave = true;
					break;
				}
			}
			//如果不存在，则新增一个部门
			if (!isHave) {
				items.push({
					total: ele.size_,
					rep_i_id: ele.rep_i_id,
					rep_i_name: ele.rep_i_name,
				});
			}
		});

		let XDataTemp = [];
		let YDataTemp = [];
		items.forEach((ele) => {
			XDataTemp.push(ele.rep_i_name);
			YDataTemp.push(ele.total);
		});
		xData.value = XDataTemp;
		yData.value = YDataTemp;

		//列表
		let tableData = items;
		data.datas.forEach((ele) => {
			for (let i = 0; i < tableData.length; i++) {
				if (tableData[i].rep_i_name == ele.rep_i_name) {
					if (ele.rep_wo_instate1 == '待审核') {
						tableData[i].dsh = ele.size_ || 0;
					} else if (ele.rep_wo_instate1 == '待受理') {
						tableData[i].dsl = ele.size_ || 0;
					} else if (ele.rep_wo_instate1 == '待完工') {
						tableData[i].dwg = ele.size_ || 0;
					} else if (ele.rep_wo_instate1 == '已完工') {
						tableData[i].ywg = ele.size_ || 0;
					} else if (ele.rep_wo_instate1 == '删除驳回') {
						tableData[i].sc = ele.size_ || 0;
					}
					break;
				}
			}
		});
		dataSource.value = tableData;
	};

	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			key: 'index',
			name: 'index',
			fixed: 'left',
			width: '70px',
			align: 'center',
			customRender: (record) => `${record.index + 1}`,
		},
		{
			title: '维修项目',
			dataIndex: 'rep_i_name',
		},
		{
			title: '工单总数',
			dataIndex: 'total',
			align: 'center',
		},
		{
			title: '待审核',
			dataIndex: 'dsh',
			align: 'center',
		},
		{
			title: '待受理',
			dataIndex: 'dsl',
			align: 'center',
		},
		{
			title: '待完工',
			dataIndex: 'dwg',
			align: 'center',
		},
		{
			title: '已完工',
			dataIndex: 'ywg',
			align: 'center',
		},
		{
			title: '删除驳回',
			dataIndex: 'sc',
			align: 'center',
		},
	];
	const toBillSearch = function (rep_wo_instate, rep_i_id) {
		const searchFormData = toRefs(searchForm);
		let param = {
			rep_wo_tj_lb_1_id: rep_i_id,
			rep_wo_instate,
			rep_wo_tj_qy_1_id: searchFormData.tj_qy.value,
			rep_u_id: searchFormData.rep_u_id.value,
			timeType: timeType.value,
			selectDay: selectDay && selectDay.length > 0 ? selectDay.join('至') : '',
		};
		tool.saveLocalStorage('BILL_SEARCH_PARAM', JSON.stringify(param));
		router.push({
			path: '/work/gdcx',
		});
	};
</script>
<style lang="less" scoped>
	.container {
		width: 95%;
		margin: 8px auto;
		.search-ref {
			margin-left: 24px;
			width: 300px;
		}
		.mybtn {
			margin: 0 4px;
		}
		.search-form {
			border-bottom: 1px dotted #ccc;
			margin-bottom: 16px;
		}
	}
</style>
